<template>
  <div class="dashboard">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="box">
      <div class="Box-left">
        <div class="head-left">
          <img src="../home/1212.png" alt="" class="head-left-top">
          <img src="../home/1213.png" alt="" class="head-right-bottom">
          <div class="head-left-text">
            <span class="text">日销售统计</span>
            <div class="head-left-num">
              <div class="head-left-number">
                <p>0</p>
                <span>当日销售量(个)</span>
              </div>
              <div class="head-left-number">
                <p>0</p>
                <span>当日销售额(元)</span>
              </div>
              <div class="head-left-number">
                <p>0</p>
                <span>当日分成(元)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="head-right">
          <img src="../home/1214.png" alt="" class="head-right-bottom2">
          <span class="text">月销售统计</span>
          <div class="head-left-num">
            <div class="head-left-number">
              <p>5959</p>
              <span>当日销售量(个)</span>
            </div>
            <div class="head-left-number">
              <p>59.34</p>
              <span>当日销售额(元)</span>
            </div>
            <div class="head-left-number">
              <p>59.39</p>
              <span>当月分成(元)</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="search">
      <span>合作商：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span style="margin: 0  10px;">日期：</span>
      <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" class="search-button">查询</el-button>
    </div>
    <span class="data">笔数统计：<i class="data-num">86110</i>元</span>
    <span class="data">收入统计：<i class="data-num">86110</i>元</span>
    <span class="data">分成统计：<i class="data-num">86110</i>元</span>

    <br>
    <el-table :data="tableData" style="width: 100%;" :header-cell-style="headClass">
      <el-table-column label="订单日期" width="240" type="index">
      </el-table-column>
      <el-table-column label="合作商" width="230" prop="name">
      </el-table-column>
      <el-table-column label="分成比例" width="200" prop="b">
      </el-table-column>
      <el-table-column label="收入（元）" width="200" prop="s">
      </el-table-column>
      <el-table-column label="笔数" width="200" prop="data">
      </el-table-column>
      <el-table-column label="分成金额" width="200" prop="data">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: '',
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value1: '',
      tableData: [{
        name: '王小虎',
        b: '15%',
        s: '5.05'
      }],
      currentPage4: 1
    }
  },
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  mounted: {
    headClass() {
      return 'background:#f3f6fb;color:#f3f6fb;font-weight:400;'
    },
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.dashboard {
  // background-color: #f8fafd;

  .box {
    display: flex;

    .Box-left {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-right: 2vw;

      .head-left {
        position: relative;
        width: 49%;
        background-color: #e9f3ff;
        height: 180px;
        border-radius: 20px;
        margin-right: 2%;
        padding: 25px;

        .head-left-top {
          position: absolute;
          top: 0;
          left: 0;
          border-top-left-radius: 20px;
          z-index: 0;
        }

        .head-right-bottom {
          position: absolute;
          bottom: 0;
          right: 0;
        }

        .text {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }

        .text-time {
          font-size: 12px;
          color: gray;
        }

        .head-left-num {
          display: flex;
          justify-content: space-around;

          .head-left-number {
            width: 150px;
            margin-top: 30px;

            p {
              font-size: 40px;
              font-weight: 700;
              color: #072074;
              text-shadow: 3px 5px 5px #c2d5ff;
            }

            span {
              font-size: 14px;
              color: #759fee;
            }
          }
        }
      }

      .head-right {
        position: relative;
        width: 49%;
        background-color: #fbefe8;
        border-radius: 20px;
        padding: 25px;
        height: 180px;

        .head-right-bottom2 {
          position: absolute;
          bottom: 0;
          right: 25px;
          z-index: 0;
        }

        .text {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }

        .text-time {
          font-size: 12px;
          color: gray;
        }

        .head-left-num {
          display: flex;
          justify-content: space-around;

          .head-left-number {
            width: 150px;
            z-index: 1;
            margin-top: 30px;

            p {
              font-size: 40px;
              font-weight: 700;
              color: #ff5757;
              text-shadow: 3px 3px 6px #f39191;
            }

            span {
              font-size: 14px;
              color: #f39191;
            }
          }
        }
      }
    }

  }
}

.search {
  margin: 30px 0;
}

.data {
  margin-right: 20px;

  .data-num {
    color: red;
  }
}

.search-button {
  width: 80px;
  height: 40px;
  background-color: #5f84ff;
  border: 0;
  margin-left: 10px;
}
</style>
